<template>
  <div class="groupGoods">
    <div class="shoppingShow" v-for="(groupGoods,group) in groupGoods" :key="group"  @click="$router.push(`/goodsDetail?id=${commodity.id}&productType=2`)">
        <img :src="groupGoods.mainPic" class="goodsShow">
        <div class="shoppingShowRight">
            <p class="goodsTitle">{{groupGoods.productName}}</p>
            <span class="goodslabel">{{groupGoods.productGrade}}级</span>
            <!-- <span class="goodslabel">{{groupGoods.productOpenness}}度开放</span> -->
            <span class="goodslabel">{{groupGoods.productLength}}</span>
            <span class="goodslabel">{{groupGoods.color}}</span>
            <div class="goodsMarket"><span>市场均价:￥{{groupGoods.averagePrice}}元</span></div>
            <span class="goodsPrice">￥{{groupGoods.productPrice}}元</span>
            <span class="groupPriceTag">团购价</span>
            <span class="goodsGroup">{{groupGoods.purchaseMinNum}}束起团</span>
        </div>
    </div>
  </div>
</template>

<script>
export default {
    name:"groupGoods",
    props:{
      groupGoods:{
        type:Array,
        default:[]
      }
    },
    data(){
      return{

      }
    },
}
</script>

<style scoped>
  .addGoods{
    background-color: rgba(247,249,252,1);
  }
  .shoppingShow{
    width:100%;
    display: flex;
    margin-top: 10px;
    background-color: #fff;
  }
  .goodsShow{
    width: 112px;
    height: 112px;
    vertical-align: middle;
    margin-left: 10px;
    margin-top: 20px;
    flex: 0.5;
  }
  .shoppingShowRight{
    flex: 1;
    margin-left: 5%;
    vertical-align: middle;
  }
  .goodsTitle{
    font-size:14px;
    font-weight:bold;
    color:rgba(51,51,51,1);
    line-height:18px;
    white-space:nowrap;
  }
  .goodslabel{
    background:#F7F9FC;
    border-radius:2px;
    font-size:10px;
    font-weight:500;
    color:#A9AEC0;
    line-height:18px;
    margin:0 5px;
    padding:3px 4px;
    text-align:center;
  }
  .goodsMarket{
    margin-top: 9px;
    margin-bottom: 15px;
    display: flex;
    justify-content: flex-start;
  }
  .goodsMarket span{
    background:#FFF0E6;
    border-radius:5px;
    font-size:10px;
    font-weight:500;
    color:#FF6200;
    /* line-height:28px; */
     padding: 3px 6px;
  }
  .goodsPrice{
    font-size:18px;
    font-weight:bold;
    color:rgba(255,98,0,1);
  }
  .groupPriceTag{
    font-size: 10px;
    border:1px solid rgba(255,0,0,1);
    color:  #FF6200 ;
    border-radius:3px;
    padding: 1px;
    vertical-align: middle;
  }
  .goodsGroup{
    font-size: 12px;
    background:rgba(0,198,87,1);
    border-radius:5px;
    padding: 5px;
    color:#fff;
    margin-left:10px;
  }
</style>
